body {
  font-family: Arial, sans-serif;
  background-color: #f0f4f8;
  padding: 20px;
  color: #333;
}

h1,
h2 {
  text-align: center;
  color: #2c3e50;
}

.fila {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}

img {
  width: 200px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Filtros aplicados individualmente */

/* Blur */
#blur1 {
  filter: blur(2px);
}
#blur2 {
  filter: blur(6px);
}

/* Brightness */
#bright1 {
  filter: brightness(150%);
}
#bright2 {
  filter: brightness(50%);
}

/* Contrast */
#contrast1 {
  filter: contrast(150%);
}
#contrast2 {
  filter: contrast(50%);
}

/* Drop Shadow */
#shadow1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#shadow2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

/* Grayscale */
#gray1 {
  filter: grayscale(1);
}
#gray2 {
  filter: grayscale(60%);
}
#gray3 {
  filter: grayscale(0.4);
}

/* Hue Rotate */
#hue1 {
  filter: hue-rotate(200deg);
}
#hue2 {
  filter: hue-rotate(90deg);
}
#hue3 {
  filter: hue-rotate(-90deg);
}

/* Invert */
#invert1 {
  filter: invert(0.3);
}
#invert2 {
  filter: invert(70%);
}
#invert3 {
  filter: invert(100%);
}

/* Opacity */
#opacity1 {
  filter: opacity(80%);
}
#opacity2 {
  filter: opacity(50%);
}
#opacity3 {
  filter: opacity(0.2);
}

/* Saturate */
#saturate1 {
  filter: saturate(0);
}
#saturate2 {
  filter: saturate(100%);
}
#saturate3 {
  filter: saturate(200%);
}

/* Sepia */
#sepia1 {
  filter: sepia(1);
}
#sepia2 {
  filter: sepia(60%);
}
#sepia3 {
  filter: sepia(0.4);
}
